<template>
  <div class="my-review">
    <div class="list-wrap" v-if="hasResult">
      <div class="list-item" v-for="(item, index) in reviewList">
        <div class="review-header">
          <img class="avatar" :src="item.avatar" alt="">
          <td class="middle">
            <tr class="name">{{item.name}}</tr>
            <tr class="star"><rater :value="item.commentStar" active-color="#F7A700" :disabled="false" :font-size="10"></rater><span class="star-text">{{item.commentStar>3?'满意':'失望'}}</span></tr>
          </td>
          <div class="more" @click="operateShow = true">...</div> 
          <div class="footer"><span class="date">{{item.commentTime}}</span><span class="type">{{item.goodsType}}</span></div>
        </div>
        <div class="review-content">
          <p class="review-text">{{item.commentText}}</p>
          <div class="review-img">
            <img :src="img" alt="" v-for="(img, index) in item.commentImgs">
          </div>
        </div>

        <div v-transfer-dom>
          <popup v-model="operateShow">
            <div class="operate-list">
              <div class="delete" @click="deleteReview(item,index)">删除</div>
              <div class="cancel" @click="operateShow = false">取消</div>
            </div>
          </popup>
        </div>
      </div>
    </div>

    <no-result text="评论" imgUrl="/static/images/no-review.png" desc="老铁你还没有评论，发表一下你的想法吧" v-else></no-result>
  </div>
</template>

<script>
  import { Rater, Popup, TransferDom } from 'vux'
  import axios from 'axios'
  import noResult from 'COMPS/no-result.vue'

  export default {
    name: 'my-review',
    data: function() {
      return {
        reviewList: [],
        operateShow: false,
        reviewPage: 1,
        hasResult: true
      }
    },
    directives: {
      TransferDom
    },
    components: {
      Rater,
      Popup,
      noResult
    },
    mounted() {
      this.getReviewList();
    },
    methods: {
      getReviewList() {
        let that = this;
        if (window.DEBUGGING) {
          return new Promise(function(resolve) {
            resolve([{
              id: 2,
              avatar: 'https://juwairenimg.oss-cn-hangzhou.aliyuncs.com/Face/faceimg_6341_200.jpg?x-oss-process=image/resize,w_70&&token=1536031775267' ,
              name: '小花园',
              commentStar: 4,
              commentTime: '2018-09-01',
              commentText: '怕是评价过期了就先来一张图片，质量很好，仪器很满意，以后会长期合作。',
              goodsType: 'BLM58 系列26GHz脉冲雷达物位计系列26GHz脉冲雷达物位计系列26GHz脉冲雷达物位计',
              commentImgs: ['http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg']
            },{
              id: 2,
              avatar: 'https://juwairenimg.oss-cn-hangzhou.aliyuncs.com/Face/faceimg_6341_200.jpg?x-oss-process=image/resize,w_70&&token=1536031775267' ,
              name: '小花园',
              commentStar: 3,
              commentTime: '2018-09-01',
              commentText: '怕是评价过期了就先来一张图片，质量很好，仪器很满意。',
              goodsType: 'WEUXHGZ-8',
              commentImgs: ['http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg','http://img0.imgtn.bdimg.com/it/,u=1291035891,1817305185&fm=26&gp=0.jpg']
            }])
            // resolve([]);
          }).then(function(data){
            that.reviewList = data;
            if (that.reviewList.length < 1) {
              that.hasResult = false
            }
          })
        }

        axios.get('/user/goodsCommentList', {
          params: {
            page: that.reviewPage
          }
        }).then(res => {
          console.log(res);
          let _data = res.data.data.map((e, index) => {
            return {
              id: e.comment_id,
              avatar: e.user_avatar,
              name: e.user_name,
              commentStar: e.stars,
              commentTime: e.comment_time,
              commentText: e.comment_text,
              goodsType: e.goods_name,
              commentImgs: e.comment_imgs
            }
          })
          that.reviewList = that.reviewList.concat(_data);
          that.reviewPage++
          if (that.reviewList.length < 1) {
            that.hasResult = false
          }
        })

      },
      deleteReview(item,index) {
        this.reviewList.splice(index, 1);
        this.operateShow = false;
        axios.post('/goods/deleteComment', {
          comment_id: item.id
        })
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';
body {margin:0px;padding:0px;background-color: #f4f6f8;}
  .my-review {
    .list-wrap {
      .list-item {
        background-color: #fff;
        padding: 20px 15px 20px 20px;
        margin-bottom: 10px;
        // &:nth-last-of-type(1) {
        //   border-bottom: none;
        // }
        .review-header {
          .avatar {
            .Round(32px);
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
          }
          .middle {
            display: inline-block;
            vertical-align: middle;
            .name {
              line-height: 15px;
              font-size: 13px;
              color: #AAA;
            }
            .star {
              .star-text {
                margin-left: 5px;
                font-size: 10px;
                color: #F5A623;
              }
            }
          }
          .more {
            float: right;
            line-height:12px;
            font-size: 32px;
            color: #999;
          }
          .footer {
            margin-top: 14px;
            font-size: 12px;
            color: #999;
            .Mult-line(1);
            .date {
              margin-right: 12px;
            }
          }
        }
        .review-content {
          .review-text {
            font-size: 14px;
            color: #333;
            line-height: 20px;
            margin-bottom: 15px;
          }
          .review-img {
            >img {
              width: 110px;
              height: 110px;
              margin-right: 7px;
            }
          }
        }
      }
    }
  }
  .operate-list {
    background-color: #fff;
    .delete, .cancel {
      line-height: 50px;
      text-align: center;
      font-size: 16px;
      color: #333;
    }
    .delete {
      border-bottom: 10px solid #f4f6f8;
    }
  }
</style>